<template>
  <div class="status-column">
    <el-tag :type="statusType">{{ statusText }}</el-tag>
    <span v-if="retryCount > 0" class="retry-count">
      重试: {{ retryCount }}/{{ maxRetryCount }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import type { Project } from '../../api/projects';

interface Props {
  project: Project;
  retryCount: number;
  maxRetryCount: number;
}

const props = defineProps<Props>();

// 缓存状态文本映射
const statusTextMap: Record<Project['status'], string> = {
  pending: '队列中',
  processing: '处理中',
  completed_generation: '生成完毕',
  partial_failure: '部分失败',
  completed: '已完成',
  failed: '失败',
  cancelled: '已取消',
};

const statusTypeMap: Record<Project['status'], '' | 'success' | 'warning' | 'info' | 'danger'> = {
  pending: 'warning',
  processing: '',
  completed_generation: 'success',
  partial_failure: 'warning',
  completed: 'success',
  failed: 'danger',
  cancelled: 'info',
};

const statusText = computed(() => statusTextMap[props.project.status] || props.project.status);
const statusType = computed(() => statusTypeMap[props.project.status]);
</script>

<style scoped>
.status-column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.retry-count {
  font-size: 12px;
  color: #909399;
  background-color: #f5f7fa;
  padding: 2px 6px;
  border-radius: 4px;
  align-self: flex-start;
}
</style>
